<template>
  <el-drawer v-model="visible" title="号源池 - 天健" size="68%" direction="ltr">
    <div></div>
    <vxe-table
      ref="tableRef"
      :data="data"
      :height="tableHeight"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
      }"
    >
      <vxe-column title="序号" width="70" field="clinicOrder" />
      <vxe-column title="就诊时段" width="180" field="timePrompt" />
      <vxe-column title="时段开始时间" width="180" field="beginTime" />
      <vxe-column title="时段开始结束" width="120" field="endTime" />
      <vxe-column title="渠道" width="120" field="channelCode" />
      <vxe-column title="状态" width="120" field="status" />
      <vxe-column title="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button v-if="row.status !== 0" type="warning" @click="removeItem(row)">详情</el-button>
        </template>
      </vxe-column>
    </vxe-table>
  </el-drawer>
</template>

<script setup lang="ts">
import type { RegisterTJPool } from '@/api/register/base'
import { ref, reactive } from 'vue'
import type { VxeTableInstance } from 'vxe-table'
const tableRef = ref<VxeTableInstance>()

const visible = ref(false)
const workId = ref('')
const data = ref<RegisterTJPool[]>([])

const tableHeight = computed(() => window.innerHeight - 180)

/**显示 */
function display(wId: string) {
  visible.value = true
  workId.value = wId
}

function removeItem(row: RegisterTJPool) {
  const $table = tableRef.value
  if ($table) {
    $table.remove(data)
  }
}

defineExpose({ display })
</script>

<style lang="scss"></style>
